<template>
  <div class="app-container">

    <el-table border style="width: 100%" :data="list" >
      <el-table-column prop="time1" label="申请时间"></el-table-column>
      <el-table-column prop="time2" label=完成时间"></el-table-column>
      <el-table-column prop="name" label="发起人"></el-table-column>
      <el-table-column prop="status" label="处理状态"></el-table-column>
      <el-table-column label="操作" style="text-align:center;width: 100%" label-width="90px" >
        <!--操作和slot-scope 要学会使用,这里是解构赋值了。给子组件使用，底下的row就相当于$scope.   -->
        <template slot-scope="{row,$index}">

          <el-button type="text" @click="handleCheck(row,$index)" >
            <i class="el-icon-edit-outline" />查看
          </el-button>

        </template>

      </el-table-column>
    </el-table>

    <!--    自己绑定了@pagination="getTableList"，切换每页最大条数时，每页的条数就会改变，如果没有绑定该事件，那么就不会切换！  -->
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getTableList"></pagination>
    <!--    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />-->



  </div>
</template>

<script>
  import pagination from '../../../components/Mypagination/index'
  export default {
    name: 'index',
    components:{
      pagination
    },
    data() {
      return{
        temp:{},
        list:[{
          time1: '2021-03-18 17:36:08',
          time2: '2021-03-18 20:20:54',
          name: 'tjh',
          status: '已完成'
        },
          {
            time1: '2021-04-09 17:36:08',
            time2: '',
            name: 'tjh',
            status: '处理中'
          }
        ],
        total:2,
        listQuery:{
          page: 1,
          limit: 10,
          id: undefined,
          name: undefined,
          type: undefined,
          status: '+id'
        }
      }
    },
    created() {

    },
    methods: {
      getTableList(){
        var page=this.listQuery.page//因为儿子emit的currentPage就是page，赋值给this.listQuery.page的
        var pageSize=this.listQuery.limit//因为儿子emit的limit就是赋值给this.listQuery.limit的
        this.listLoading = true;
        this.$axios.get("http://localhost:8183/devices/findAll/"+page+'/'+pageSize).then(response=>{
          // console.log(response);
          this.list=response.data.content;
          this.total=response.data.totalElements;
          this.listLoading=false;
        })
        // getListByCondition2().then(response=>{
        //     console.log(response);
        //     this.list=response.data;
        // })
      },
      handleReset(){
        if(this.dialogStatus==='add')
          this.$refs['form1'].resetFields();//会把所有内容都重置，包括disable的ID主键
        else{
          this.temp.name=''
          this.temp.type=''
          this.temp.status=''
          this.temp.otherinfo=''
        }

      },
      handleWarning(response){
        this.$message({
          message:  response.message || response ,
          type: "warning",
          duration: 2000
        })
      },
      handleFilter(){
        // console.log(this.listQuery);
        var obj={}
        obj.list=this.list
        obj.listQuery=this.listQuery
        getListByCondition(obj).then(resp=>{
          console.log(resp.mockList)
          this.list=resp.mockList;
        }).catch(resp=>{
          console.log("哈哈哈");
        })
      },
      handleCheck(){
        this.$router.push({
          path:'/deviceFix/fixForm/RecordprocessView'
        })
      }
    }
  }
</script>

<style scoped>

</style>
